<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="订单确认"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="order">
      <van-cell title="服务地址">
        <template #label>
          <van-row>
            <van-col span="8">姓名:张三</van-col>
            <van-col span="16">电话:15536332867</van-col>
          </van-row>
          <van-row>
            <van-col span="16">地址:苏州市昆山市浦东软件园</van-col>
          </van-row>
        </template>
      </van-cell>
    </div>
    <!-- 订单详情 -->
    {{ userInfo }}
    <div class="orderDetails">
      <van-cell title="订单详情">
        <template #label>
          <van-row>
            <van-col span="8">蜜雪冰城</van-col>
            <van-col span="8">￥12</van-col>
            <van-col span="8">x2</van-col>
          </van-row>
          <van-row>
            <van-col span="16"></van-col>
            <van-col span="8">总计 24</van-col>
          </van-row>
        </template>
      </van-cell>
    </div>
    <div class="submit">提交订单</div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  created() {
    this.getUserInfo();
    setTimeout(()=>{
      this.findAllAddress()
    },1000)
    
  },
  methods: {
    // 引入获取地址信息的方法
    ...mapActions("address", ["getAllAddress"]),
    // 引入获取用户信息的方法
    ...mapActions("user", ["getUserInfo"]),
    onClickLeft() {
      this.$router.go(-1);
    },
    // 获取用户对应的地址
    findAllAddress() {
      this.getAllAddress({
        page: 1,
        pageSize: 10,
        userId: this.userInfo.id,
      });
    },
  },
};
</script>
<style >
.van-cell {
  width: 95%;
  margin: 10px auto;
  /* 边框阴影 */
  box-shadow: 2px 2px 2px 2px rgba(158, 117, 255, 0.2);
  border-radius: 5px;
}
.submit {
  width: 53%;
  height: 40px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  text-align: center;
  color: #fff;
  border-radius: 22px;
  line-height: 40px;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 2em;
  cursor: pointer;
}
</style>